﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas
        {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6wgGyWqi2GRqU0csQ4kXf5nHHYOcxRps&sensor=false">
    </script>
    <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <link href="../../Content/style.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/style-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var map; //google map
        var markerCenter; // marker trung tam ban do
        var coordsCenter; // toa do trung tam
        var markerNear = []; // marker nguoi dung xung quanh
        var markerPlace = []; //marker dia diem tim kiem
        var infoPlace = new Array(); //thong tin dia diem tim kien
        var directionService = new google.maps.DirectionsService(); //service tim duong
        var directionDisplay; // ve duong di

        var Locations = [];

        var iterator = 0; // Bien dem tang khi khoi tao marker

        // InfoWindow cua google map
        var infoWindow = new google.maps.InfoWindow();

        // Thong tin hien thi tren tooltip
        var innerHtml = "<div class='info_place'>" +
                        "<ul id='info_replace' class='street-content'>" +
                            "<li>" +
                                "<h5>#{name}</h5>" +
                                "<a class='address'>#{place}</a>" +
                                "<span class='function' datalat='#{lat}' datalong='#{lng}'>" +
                                        "<a href='javascript:void(0)' class='chat'>Chat</a>" +
                                        "<a href='javascript:void(0)' class='setstartpoint'>Điểm đi</a>" +
                                        "<a href='javascript:void(0)' class='setendpoint'>Điểm đến</a>" +
                                        "<a href='javascript:void(0)' class='findplacearound'>Xung quanh</a>" +
                                "</span>" +
                             "</li>" +
                        "</ul>" +
                    "</div>";

        //Thong tin tooltip nguoi dung
        var tooltip = "<div class='info_place'>" +
                        "<ul id='info_replace' class='street-content'>" +
                            "<li>" +
                                "<h5>#{name}</h5>" +
                                "<a class='address'>#{place}</a>" +
                                "<span class='function' datalat='#{lat}' datalong='#{lng}'>" +
                                        "<a href='javascript:void(0)' class='setstartpoint'>Điểm đi</a>" +
                                        "<a href='javascript:void(0)' class='setendpoint'>Điểm đến</a>" +
                                        "<a href='javascript:void(0)' class='findplacearound'>Xung quanh</a>" +
                                "</span>" +
                             "</li>" +
                        "</ul>" +
                    "</div>";

        //Marker tim dich vu
        var yellowMarker = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_yellow.png",
            new google.maps.Size(22, 30),
            new google.maps.Point(0, 0),
            new google.maps.Point(6, 20));

        var shadowMarker = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_shadow.png",
            new google.maps.Size(22, 30),
            new google.maps.Point(0, 0),
            new google.maps.Point(6, 20));

        var startpoint; //diem bat dau khi tim kiem = tooltip
        var endpoint; //diem ket thuc khi tim kiem = tooltip

        function gps() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(initmap, null);
            }
        }

        function getFriendLocation() { 
            var requestURL = "http://localhost:53220/api/friendlist?user=" + window.opener.$('#select').text();
            $.ajax({
                url: requestURL,
                type: 'GET',
                success: function (data) {
                    $.each(data, function (key, val) {
                        var friend = [];
                        friend.push(val.Username);
                        friend.push(val.Position.Latitude);
                        friend.push(val.Position.Longitude);
                        Locations.push(friend);
                    });
                    Drop();
                }
            });               
        }
        function initmap(position) {
            coordsCenter = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var mapOptions = {
                center: coordsCenter,
                zoom: 11,
                panControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_TOP
                },
                scaleControl: true,
                scaleControlOptions: {
                    position: google.maps.ControlPosition.BOTTOM_LEFT
                },
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.RIGHT_TOP
                },
                streetViewControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            directionDisplay = new google.maps.DirectionsRenderer({ 'map': map });
            directionDisplay.setPanel(document.getElementById("directionsPanel"));
            var image = new google.maps.MarkerImage("../../Content/img/indicate_large.png",
            new google.maps.Size(64, 64));
            marker = new google.maps.Marker({
                map: map,
                icon: image,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: coordsCenter,
                title: "Your position"
            });

            google.maps.event.addListener(marker, 'mouseover', function () {
                infoWindow.setContent(tooltip.replace(/#\{name\}/g, "Vị trí của bạn").replace(/#\{lat\}/g, position.coords.latitude).replace(/#\{lng\}/g, position.coords.longitude));
                infoWindow.open(map, this);
            });

            setInterval("toggleBounce()", 1000);
            getFriendLocation();
        }

        function toggleBounce() {
            if (marker.getAnimation() != null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        function addMaker() {
            var markerLocation = Locations[iterator];
            var locationGeo = new google.maps.LatLng(markerLocation[1], markerLocation[2]);
            markerNear.push(new google.maps.Marker({
                position: locationGeo,
                map: map,
                animation: google.maps.Animation.DROP,
                title: markerLocation[0]
            }));

            // Hien thi thong tin khi dua chout vao
            google.maps.event.addListener(markerNear[iterator], 'mouseover', function () {
                infoWindow.setContent(setInfo(markerLocation));
                infoWindow.open(map, this);
            });

            // Tim duong den vi tri nguoi dung khi click vao
            google.maps.event.addListener(markerNear[iterator], 'click', function () {
                infoWindow.close();
                calcRoute2Friend(this.position);
                $('#streetformtab').click();
            });

            iterator++;
        }

        // Ham hieu ung khi marker xuat hien
        function Drop() {
            for (var i = 0; i < Locations.length; i++) {
                setTimeout(function () {
                    addMaker();
                }, i * 200);
            }
        }

        function setInfo(info) {
            var contentHtml = innerHtml.replace(/#\{name\}/g, info[0]).replace(/#\{lat\}/g, info[1]).replace(/#\{lng\}/g, info[2]);
            return contentHtml;
        }

        function calcRoute2Friend(position) {
            var start = coordsCenter;
            var end = position;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK)
                    directionDisplay.setDirections(result);
            });
        }

        function calcRoute(start, end) {
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK)
                    directionDisplay.setDirections(result);
            });
        }
    </script>
    <script src="../../Content/js/Search.js" type="text/javascript"></script>
    <script src="../../Content/js/Interaction.js" type="text/javascript"></script>
</head>
<body onload="gps()" style="overflow: hidden">
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
    <div id="sidebar">
        <ul id="tabs">
            <li id="placeformtab" class="tab active"><a>Tìm địa chỉ</a></li>
            <li id="streetformtab" class="tab inactive"><a>Tìm đường</a></li>
            <li id="placearoundformtab" class="tab inactive"><a>Tìm xung quanh</a></li>
        </ul>
        <span id="border_home_hide"><a id="homeformtab" title="Trang chủ"></a><span id="but_hsidebar"
            title="Ẩn form"></span></span>
        <div id="tabs-content">
            <div id="placeform" class="listplace border-content visible" style="overflow-y: auto">
                <div id="place-search-form">
                    <input type="text" name="keywords" value="Nhập vị trí, địa chỉ ..." onfocus="if(this.value=='Nhập vị trí, địa chỉ ...') this.value='';"
                        onblur="if(this.value=='') this.value='Nhập vị trí, địa chỉ ...';" id="keyword" />
                    <input type="submit" value="" class="button-inset" id="search" />
                </div>
                <ul id="results" class="street-content border-slider-content" style="margin-top: 10px;
                    float: left">
                </ul>
            </div>
            <div id="streetform" class="border-content invisible" style="display: none;">
                <span class="border-input-button" id="startPoint">
                    <input id="startInput" type="text" value="Nhập vị trí bắt đầu" name="keywords" onfocus="if(this.value=='Nhập vị trí bắt đầu') this.value='';"
                        onblur="if(this.value=='') this.value='Nhập vị trí bắt đầu';" />
                    <input type="submit" class="direction button-inset" value="" />
                </span><span class="border-input-button" id="endPoint">
                    <input id="endInput" type="text" value="Nhập vị trí kết thúc" name="keywords" onfocus="if(this.value=='Nhập vị trí kết thúc') this.value='';"
                        onblur="if(this.value=='') this.value='Nhập vị trí kết thúc';" />
                    <input type="submit" class="direction button-inset" value="" />
                </span>
                <div id="directionsPanel" style="margin-top: 10px; float: left; height: 400px; width: 307px;
                    overflow: auto">
                </div>
            </div>
            <div id="placearoundform" class="border-content invisible" style="display: none;">
                <div id="form_input">
                    <span id="placetype">
                        <label>
                            Loại địa điểm</label>
                        <select id="lst_placetype">
                            <option value="">Tất cả</option>
                            <option value="post_office">Bưu Điện</option>
                            <option value="museum">Bảo Tàng</option>
                            <option value="hospital">Bệnh Viện</option>
                            <option value="park">Công Viên</option>
                            <option value="restaurant">Nhà Hàng</option>
                            <option value="bank">Ngân Hàng</option>
                            <option value="church">Nhà Thờ</option>
                            <option value="stadium">Sân Vận Động</option>
                            <option value="school">Trường Học</option>
                            <option value="atm">Trạm ATM</option>
                            <option value="cafe">Cà Phê</option>
                            <option value="gas_station">Cây Xăng</option>
                            <option value="university">Trường Đại Học, Cao Đẳng</option>
                            <option value="bus_station">Trạm Xe Buýt</option>
                            <option value="movie_theater">Rạp Chiếu Phim</option>
                            <option value="book_store">Nhà Sách</option>
                        </select>
                    </span><span id="range">
                        <label>
                            Bán kính</label>
                        <select id="num_range">
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="500">500</option>
                            <option value="1000">1000</option>
                            <option value="1500">1500</option>
                            <option value="2000">2000</option>
                        </select>
                        <a style="padding-left: 10px; font-size: 14px; font-weight: bold;">Meter</a>
                    </span>
                    <div class="clear-fix">
                    </div>
                </div>
                <div id="placearoundform_content" class="listplace border-content visible">
                    <ul id="placearoundform_replace" class="street-content border-slider-content">
                    </ul>
                    <span class="top_seperate"></span><span class="bottom_seperate"></span>
                    <div id="slider_placearoundform" class="slider-content">
                        <span></span>
                    </div>
                </div>
            </div>
            <div id="conBut_streetform">
                <a href="#" class="hidebut_result" title="Hiện danh sách kết quả">&#x25BA;</a> <a
                    href="#" class="hidebut_result" title="Hiện danh sách kết quả">&#x25BA;</a>
            </div>
        </div>
    </div>
    <span id="but_ssidebar" style="display: none;" title="Hiện form">►</span>
</body>
</html>
